{% extends 'layouts/base.html' %}
{% block content %}
 <style>
       @media screen and (min-height: 450px)  {
    .other_btn_box{
      position: absolute;
      bottom: 0;
      padding: 0 .0 40px 0;  
      width: 100%;
    }
  }
  @media screen and (orientation: landscape)  {
    .other_btn_box{
      position: relative;
      margin-top: 100px;
    }
  }
</style>
<script src="{{config['application']['site']['assetsUri']}}front/js/check.js"></script>
<div id="container" class="bj_color register_wrap">
    <div class="rows_cells">
        <div class="weui_cell row_cell">
            <div class="weui_cell_hd imgpadding"><img src="{{config['application']['site']['assetsUri']}}front/images/people.png"/></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" placeholder="手机号" id="mobile" onblur="check_mobile(this.value)"/>
            </div>
        </div>
        <div class="weui_cell row_cell weui_vcode">
            <div class="weui_cell_hd imgpadding"><img src="{{config['application']['site']['assetsUri']}}front/images/code.png" /></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" placeholder="验证码" id="code" onblur="check_code(this)"/>
            </div>
            <div class="weui_cell_ft">
                <a href="javascript:;" class="weui_btn btn_short_light register_code_btn" id="getMCode">获取验证码</a>
            </div>
        </div>
    </div>
    <div class="btn_box">
        <a class="weui_btn btn_primary register_btn" href="javascript:" id="submit">验证</a>
    </div>
    <div class="agree_checkbox">
        <input id="agree" type="checkbox" checked="checked" class="agree_checkbox_input">
        <span class="icon-check"></span>
        <label class="agree_label" for="agree">我同意<a href="{{ url('about/index')}}" target="_blank">用户注册协议</a></label>
    </div>
    <div class="other_btn_box">
          <div class="other_tips">——————  其他登录方式  ——————</div>
          <a class="weui_btn btn_primary other_btn" href="{{loginUrl}}">微信</a>
    </div>
</div>
{% endblock %}
{% block script %}
<script src="{{config['application']['site']['assetsUri']}}front/js/jquery.min.js"></script>
<script>
    var InterValObj; //timer变量，控制时间
    var count = 100; //间隔函数，1秒执行  
    var curCount;//当前剩余秒数  
    var code = ""; //验证码
    var codeLength = 5;//验证码长度
    var temp_code = 0;//存储上一次用户输入的验证码
    $(document).ready(
            function(){
                //失去焦点
                // $("#mobile").blur(function check_mobile(){
                    
                // })；
                // 定义获取验证码事件
                $("#getMCode").click(function get_mobile(){
                    curCount = count;
                    var phone=$("#mobile").val();//手机号码
                    if(phone != ""){
                        //产生验证码  
                        for (var i = 0; i < codeLength; i++) {  
                            code += parseInt(Math.random() * 9).toString();  
                        }  
                        //设置button效果，开始计时  
                        $('#getMCode').unbind("click");  
                        $("#getMCode").val("请在" + curCount + "秒内输入验证码");
                         
                        //向后台发送处理数据  
                        $.get("{{ url('mobileregister/register') }}?mobile="+$("#mobile").val()+"&mcode="+code,function(data){
                            obj = jQuery.parseJSON(data);
                            if(obj.result == 'true') {
                                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次 
                            } else {
                                $('#getMCode').text = '发送失败';
                            }
                            return;
                        }); 
                    } else {  
                        alert("手机号码不能为空！");  
                    }
                });
                $("#submit").one('click',function check_code(){
                          $.get("{{ url('mobileregister/checkmessagecode') }}?code="+$("#code").val()+"&mobile="+$("#mobile").val(),function(data){
                                obj = jQuery.parseJSON(data);
                                //alert(data);

                                if(obj.result=='true'){
                                    //alert('验证码正确，点击继续！');
                                    $("#submit").attr('href',obj.weixinurl);
                                    $("#submit").text("登陆");
                                }else{
                                    alert('验证码错误');
                                }
                          });
                });  
            }
    );
    //timer处理函数  
    function SetRemainTime() {
        if (curCount == 0) {                  
            window.clearInterval(InterValObj);//停止计时器
            //启用按钮  
            $("#getMCode").text("重新发送验证码");
            code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
            $("#getMCode").click(function get_mobile(){
                    curCount = count;
                    var phone=$("#mobile").val();//手机号码
                    if(phone != ""){
                        //产生验证码  
                        for (var i = 0; i < codeLength; i++) {  
                            code += parseInt(Math.random() * 9).toString();  
                        }  
                        //设置button效果，开始计时  
                        $('#getMCode').unbind("click");  
                        $("#getMCode").val("请在" + curCount + "秒内输入验证码");
                         
                        //向后台发送处理数据  
                        $.get("{{ url('mobileregister/register') }}?mobile="+$("#mobile").val()+"&mcode="+code,function(data){
                            obj = jQuery.parseJSON(data);
                            if(obj.result == 'true') {
                                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次 
                            } else {
                                $('#getMCode').text = '发送失败';
                            }
                            return;
                        }); 
                    } else {  
                        alert("手机号码不能为空！");  
                    }
            }); 
        }  
        else {
            curCount--;
            $("#getMCode").text("请在" + curCount + "秒内输入验证码");  
        }  
    }
</script>
{% endblock %}
